<template>
	<view class="cu-item shadow" @click="clickEvent">
		<view class="image">
			<image :src="imageUrl" mode="widthFix"></image>
			<view class="cu-tag bg-gradual-orange">{{tag}}</view>
			<view class="cu-bar bg-shadeBottom"><text class="text-cut">{{type}}</text></view>
		</view>
		<view class="cu-list menu-avatar">
			<view class="cu-item">
				<view class="margin-lr flex-sub">
					<view class="item-name text-grey text-lg">{{title}}</view>
					<view class=" text-gray text-sm flex justify-between">
						{{time}}
						<view class="text-gray text-sm">
							<text class="cuIcon-attentionfill margin-lr-xs"></text>
							{{read}}
							<text class="cuIcon-appreciatefill margin-lr-xs"></text>
							{{like}}
							<text class="cuIcon-messagefill margin-lr-xs"></text>
							{{use}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'KCardBase',
		props:{
			imageUrl: {
				type: String,
				default: () => ""
			},
			tag:{
				type:String,
				default: () => '标签'
			},
			type:{
				type:String,
				default: () => '类型'
			},
			title:{
				type:String,
				default: () => '标题'
			},
			time: {
				type:String,
				default:() => '2022-10-19'
			},
			read:{
				type: String,
				default: () => '0'
			},
			like:{
				type: String,
				default: () => '0'
			},
			use:{
				type: String,
				default: () => '0'
			}
		},
		methods: {
			clickEvent(){
				this.$emit('tabClick')
			}
		}
	}
</script>

<style>
	.item-name {
		margin-bottom: 15rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
</style>